JavaScript

{dialog.object}setListColumnsAndPopulate Method

Syntax

{dialog.object}.setListColumnsAndPopulate(listId,data,options);

Arguments

listId

The ID of the List Control.

data

A JSON object defining the data used to populate the List.

options

A JSON object with settings. Options can include:

columnCount

The number of columns to create. For example, in a set of data with 50 columns, you may only want to show the first 5 columns in the List control.

columns

An array listing the fields to use for the List columns. See example code below for using JSON syntax to customize columns and insert buttons.

returnExpression

A JavaScript expression that defines what value to return from the List control for the selected row. This expression must prefix column names with 'data'. Eg, 'data.Firstname+" "+data.Lastname'

showTitle

A true or false value. Defines whether or not column titles should be displayed.

template

The Client-side Template used to render the List Layout. Only used if the List Layout is freeform.

Description

Dynamically sets the columns in a List and populates the List.

Discussion

The {dialog.object}.setListColumnsAndPopulate method dynamically sets the columns in a List control and populates the List with records defined in the data parameter. The columns are based on the columns in the first row of data. Note: To populate a List using a freeform template layout, use the {dialog.object}.setListTemplateAndPopulate method.

Example

var data = [
    {
        "Firstname": "Kathy",
        "Lastname": "Morton",
        "City": "New York",
        "State": "NY"
    }
];
//populate the List with the first 3 columns in data
var ops = {columnCount: 3};
{dialog.object}.setListColumnsAndPopulate('list',data,ops);

//specify columns
var ops = {columns: ['Firstname','State']};
{dialog.object}.setListColumnsAndPopulate('list',data,ops);

//specify the List return value
var ops = {columns: ['Firstname','State'], returnExpression: 'data.Firstname'};
{dialog.object}.setListColumnsAndPopulate('list',data,ops);

//turn off column titles
var ops = {showTitle: false};
{dialog.object}.setListColumnsAndPopulate('list',data,ops);

//freeform layout
var ops = {style: 'freeform', template: '{Firstname} {Lastname}
{City}'};
{dialog.object}.setListColumnsAndPopulate('list',data,ops);

//advanced mode - control column widths, headings and insert buttons (b1 and b2 are buttons in the initial List layout)
var ops = {
    columns: [
            {type:'field',name: 'Firstname', heading: 'First NAME', width: 'flex(2)'},
            {type: 'button',name: 'b1'},
            {type:'field',name: 'Lastname', heading: 'LAST NAME', width: 'flex(1)'},
            {type: 'button',name: 'b2'},
            {type:'field',name: 'State', heading: 'State Name', width: 'flex(.5)'}
        ]
};
{dialog.object}.setListColumnsAndPopulate('list',data,ops);

See Also